<template>
  <div class="list-container">
    <ul>
      <li
        class="shop-list"
        v-for="item in recommdList"
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <div class="shop-top">
          <img v-lazy="item.imgUrl" alt="" />
        </div>
        <div class="shop-bottom">
          <p v-text="item.name"></p>
          <p class="small" v-text="item.content">1.12''GN2｜骁龙888</p>
          <p class="price">￥{{item.pprice}}起</p>
          <div class="buy">
            <button>立即购买</button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ShopList',
  props: {
    recommdList: Array
  },
  methods: {
    goDetail (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id: id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.list-container {
  background: #fff;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.shop-list {
  width: 4.8rem;
  margin-bottom: 0.533333rem;
  .shop-top {
    img {
      width: 4.8rem;
    }
  }
  .shop-bottom {
    font-size: 0.373333rem;
    text-align: center;
    color: #333;
    .small {
      font-size: 0.32rem;
      color: #999;
    }
    .price {
      color: #ea625b;
    }
    .buy {
      button {
        background-color: #ea625b;
        border: 1px solid #ea625b;
        outline: none;
        padding: 0.133333rem 0.533333rem;
        color: #fff;
      }
    }
  }
}
</style>
